<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <title>表单控件的尺寸</title>
</head>
<body>
    <div class="container">
        <form action="">
            <!-- 输入框和选择框的宽度可以通过网格系统来控制 -->
            <div class="form-row">
                <div class="col-sm-6">
                    <label for="">城市</label>
                    <input type="text" class="form-control" placeholder="城市">
                </div>
                <div class="col-sm-6">
                    <label for="">区/县</label>
                    <input type="text" class="form-control" placeholder="区/县">
                </div>
            </div>
            <div class="form-row mt-5">
                <!-- col-form-label-lg可以让label变大 -->
                <label for="" class="col-sm-2 col-form-label col-form-label-lg">邮箱</label>
                <div class="col-sm-10">
                    <!-- form-control-lg可以让表单控件变高，注意：是新加的类，不是在原来的form-control上改 -->
                    <input type="email"class="form-control form-control-lg" placeholder="大型输入框">
                </div>
            </div>
            <div class="form-row mt-2">
                <label for="" class="col-sm-2 col-form-label">邮箱</label>
                <div class="col-sm-10">
                    <input type="email"class="form-control" placeholder="大型输入框">
                </div>
            </div>
            <div class="form-row mt-2">
                <!-- col-form-label-sm可以让label变小 -->
                <label for="" class="col-sm-2 col-form-label col-form-label-sm">邮箱</label>
                <div class="col-sm-10">
                    <!-- form-control-sm可以让表单控件变小，注意：是新加的类，不是在原来的form-control上改 -->
                    <input type="email"class="form-control form-control-sm" placeholder="小型输入框">
                </div>
            </div>
            <!-- 在输入框底部显示帮助文字 -->
            <div class="form-group mt-5">
                <label for="">密码</label>
                <input type="password" class="form-control">
                <small class="form-text text-muted">密码长度8到20个字符，必须包含字母、数字和特殊字符，不能包含空格</small>
            </div>
        </form>
    </div>
</body>
</html>